<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<!--action 设置请求地址-->
<form action="https://www.jd.com/">
<!--    name属性是所有空间必须添加的,否则不提交该参数-->
<!--    placeholder 占位文本-->
    <!--maxlength 最大字符长度-->
    <!--value 设置控件的值-->
    <!--https://www.jd.com/?username=tom&password=122344343-->
    <!--去掉readonly之后: https://www.jd.com/?username=jerry&password=123121313-->
用户名:<input type="text" name="username"
              placeholder="请输入用户名" value="tom" maxlength="5" readonly><br>
密码:<input type="password" name="password" placeholder="请输入密码"><br>
    <!--单选框 必须设置value属性 如果不设置则提交on(表示被选中,但是没有值)-->
    <!--checked 设置默认的为被选中-->
    <!--https://www.jd.com/?username=tom&password=&gender=mw-->
    <!--https://www.jd.com/?username=tom&password=&gender=w-->
    <!--https://www.jd.com/?username=tom&password=-->
    <!--https://www.jd.com/?username=tom&password=&gender=on-->
    性别<input type="radio" name="gender" value="m">男
    <input type="radio" name="gender"  checked value="m">女<br>
<!--加入label标签 ,可以将男女汉字与radio选择对应起来-->
    性别<input type="radio" id="r1" name="gender" value="m"><label for="r1">男</label>
    <input type="radio" id="r2"  name="gender"  checked value="w"><label for="r2">女</label><br>
<!--多选框 -->
<!--多选框和单选框的属性类似 ,value值必须设置 -->
    <!--提交信息之后,可以看到多个value值都被付给hobby-->
    <!--https://www.jd.com/?username=tom&password=&gender=w&hobby=cy&hobby=hj-->
    兴趣爱好:<input type="checkbox" name="hobby" value="cy">抽烟
    <input type="checkbox" name="hobby" value="hj">喝酒
    <input type="checkbox" name="hobby" value="dmj">打麻将<br>
<!--日期选择器-->
    <!--https://www.jd.com/?username=tom&password=&gender=w&birthday=2023-10-02-->
    生日:<input type="date" name="birthday"><br>
<!--文件选择器-->
    <!--https://www.jd.com/?username=tom&password=&gender=w&birthday=&pic=F87EA4D291FE8A2B9EC3CC90B2C_7EC3DA74_1556E.jpg-->
    靓照<input type="file" name="pic"><br>
<!--下拉菜单-->
    <!--下来选项的value设置 ,如果设置value ,则提交设置的值;若不设置value,则提交标签体内的内容-->
    <!--https://www.jd.com/?username=tom&password=&gender=w&birthday=&pic=&city=%E5%B9%BF%E5%B7%9E-->
    <!--https://www.jd.com/?username=tom&password=&gender=w&birthday=&pic=&city=gz-->
    <!--selected 默认被选项-->
    <select name="city">
        <option value="bj">北京</option>
        <option value="sh" selected>上海</option>
        <option value="gz">广州</option>
        <option value="sz">深圳</option>
    </select><br>

    <input type="submit" value="注册"><br>
    <!--重置表单里面的内容-->
    <input type="reset" value="重置">
    <!--自定义按钮-->
    <input type="button" value="按钮">
    <!--按钮的其他写法,与上述按钮作用一样 只是写法不同-->
    <button type="submit">注册</button>
    <button type="reset">重置</button>
    <button type="button">按钮</button>
</form>
<!--分区标签-->
<!--每个div独占一行 多个span共占一行-->
<div>div1</div>
<div>div2</div>
<div>div3</div>
<span>span1</span>
<span>span2</span>
<span>span3</span>

</body>
</html>